<template>
  <div class="layout">
    <HeaderNav v-if="showHeader" />
    <div class="content" :style="contentStyle">
      <router-view/>
    </div>
  </div>
</template>

<script>
import HeaderNav from '../components/layout/HeaderNav.vue'
import { EventBus } from '../utils/eventBus.js'

export default {
  name: 'MainLayout',
  components: {
    HeaderNav
  },

  data() {
    return {
      manuallyHidden: false // 添加状态记录是否手动隐藏
    }
  },

// 在 created 钩子中
created() {
  // 监听显示/隐藏头部的事件
  EventBus.on('toggle-header', (visible) => {
    this.manuallyHidden = !visible;
  });
},

beforeDestroy() {
  // 组件销毁前，移除事件监听
  EventBus.off('toggle-header');
},

  computed: {
    showHeader() {
      console.log('showHeader', this.manuallyHidden)
      // 结合路由设置与手动控制状态
      return this.$route.meta.showHeader !== false && !this.manuallyHidden;
    },
    // 添加计算属性返回动态样式
  contentStyle() {
    return {
      height: this.showHeader ? 'calc(100vh - 80px)' : '100vh'
    };
  }

  }
}
</script>

<style scoped>
.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  width: 100%;
  height: calc(100vh - 80px);
  overflow: auto;
}
</style>
